<template>
  <div>
    <van-row class="history">
      <van-col span="12">历史记录</van-col>
      <van-col class="GarbageIcon" span="12">
        <van-icon @click="cleanHistory" name="delete-o"
      /></van-col>
      <van-col class="tagBox" span="24">
        <van-tag
          @click="clickTag(item)"
          v-for="(item, index) in historyKeywordList"
          :key="index"
          class="tag"
          plain
          type="default"
          >{{ item }}</van-tag
        >
      </van-col>
    </van-row>
    <van-row class="hotKeyword">
      <van-col span="12">热门搜索</van-col>

      <van-col class="tagBox" span="24">
        <van-tag
          @click="clickTag(item.keyword)"
          v-for="(item, index) in hotKeywordList"
          :key="index"
          class="tag"
          plain
          :type="index ? 'default' : 'danger'"
          >{{ item.keyword }}</van-tag
        >
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { cleanHistoryAPI } from "@/request/api";
export default {
  data() {
    return {};
  },
  props: ["hotKeywordList", "historyKeywordList"],
  methods: {
    clickTag(value) {
      this.$emit("getTag", value);
    },
    async cleanHistory() {
      let res = await cleanHistoryAPI();
      if (res.errno != 0) return;
      this.historyKeywordList = "";
      this.$notify({ type: "success", message: "清除成功" });
    },
  },
};
</script>

<style lang="less" scoped>
.history,
.hotKeyword {
  background-color: #fff;
  font-size: 0.16rem;
  padding: 0.2rem;
  .tagBox {
    margin-top: 0.1rem;
    .tag {
      margin: 0.02rem;
    }
  }

  .GarbageIcon {
    display: flex;
    justify-content: flex-end;
  }
}
.hotKeyword {
  margin-top: 0.2rem;
}
</style>
